{% extends "./inc/base.html" %}
{% block style %}
<link rel="stylesheet" href="/static/admin/js/chosen/chosen.css" type="text/css"/>
<link rel="stylesheet" href="/static/admin/js/nestable/nestable.css" type="text/css"/>
<style>
    .chzn-container-multi .chzn-choices .search-choice {
        margin: 3px 5px;
        display: block;
    }

    .chzn-container-multi .chzn-choices li {
        float: none;
    }
</style>
{%endblock%}
{% block content %}
<section class="vbox">
    <header class="header bg-light dk">
        <p>{{controller.meta_title}}</p>
    </header>
    <section class="scrollable wrapper">
        <div class="row">
            <div class="col-lg-12">
                <section class="panel panel-default">
                    <header class="panel-heading text-right bg-light clearfix">
                        <ul class="nav nav-tabs pull-left">
                            <li class="active"><a data-toggle="tab" href="#tab-1"><i class="fa fa-cog text-muted"></i>
                                基础</a></li>
                            <li class=""><a data-toggle="tab" href="#tab-2"><i class="fa fa-cog text-muted"></i> 设计</a>
                            </li>
                            <li class="">
                                <a data-toggle="tab" href="#tab-3"><i class="fa fa-cog text-muted"></i> 高级</a>
                            </li>
                        </ul>

                    </header>
                    <div class="panel-body">
                        <form id="ajaxForm" method="post" class="form-horizontal" action="/admin/model/edit"
                              data-validate="parsley">
                            <div class="tab-content">

                                <div id="tab-1" class="tab-pane fade active in">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">模型标识</label>

                                        <div class="col-sm-10">

                                            <div class="row">
                                                <div class="col-md-4">
                                                    <input type="text" class="form-control  " name="name"
                                                           value="{{info.name}}" data-required="true" data-Remote="/admin/model/checkname/id/{{info.id}}">
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 请输入文档模型标识</span>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">模型名称</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <input type="text" class="form-control  " name="title"
                                                           value="{{info.title}}"
                                                           data-required="true">
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 请输入模型的名称</span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">模型类型</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                <div class="col-md-4 ">
                                                    <label class="radio-inline i-checks">
                                                        <input type="radio" value="1" name="extend" checked><i></i> 系统模型
                                                    </label>
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 系统模型会继承基础模型</span>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {%if info.id != 1%}
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">是否开启话题</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                <div class="col-md-4 ">
                                                    <select class="form-control " name="key_show">
                                                        <option value="1" {%if info.key_show==1%} selected="selected"{%endif%}>是</option>
                                                        <option value="0" {%if info.key_show==0%} selected="selected"{%endif%}>否</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none">选“是”,该模型会在话题模块中显示。</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">是否开启审核</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                <div class="col-md-4 ">
                                                    <select class="form-control " name="is_approval">
                                                        <option value="1" {%if info.is_approval==1%} selected="selected"{%endif%}>是</option>
                                                        <option value="0" {%if info.is_approval==0%} selected="selected"{%endif%}>否</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none">选“是”,该模型会在内容审核管理中显示。</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {%endif%}
                                </div>
                                <div id="tab-2" class="tab-pane fade">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">选择字段</label>

                                        <div class="col-sm-10">
                                            <div class=" m-b-xs">
                                                <div class="btn-group ">
                                                    <a href="/admin/attribute/add?model_id={{info.id}}" class="btn btn-info btn-xs "><i class="fa  fa-plus"></i> 新增字段</a>
                                                    <a href="/admin/attribute/index/?model_id={{info.id}}" class="btn btn-dark btn-xs"><i class="fa fa-cogs"></i> 管理字段</a>

                                                </div>
                                            </div>
                                            <select style="width:260px" multiple class="chosen-select"
                                                    name="attribute_list">

                                                {% if fields %}

                                                <optgroup label="自定义字段">
                                                    {% for v in fields %}
                                                    <option value="{{v.id}}" {% if v.id|in_Array(info.attribute_list) %}
                                                            selected="selected" {% endif %}>{{v.title}} : {{v.name}}
                                                    </option>
                                                    {% endfor %}
                                                </optgroup>
                                                {% endif %}
                                                {% if extend_fields %}

                                                <optgroup label="系统字段">
                                                    {% for v in extend_fields %}
                                                    <option value="{{v.id}}" {% if v.id|in_Array(info.attribute_list) %}
                                                            selected="selected" {% endif %}>{{v.title}} : {{v.name}}
                                                    </option>
                                                    {% endfor %}
                                                </optgroup>
                                                {% endif %}


                                            </select>

                                            <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 只有新增了字段，该表才会真正建立</span>
                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">表单显示分组</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                <div class="col-md-4 ">
                                                    <input type="text" class="form-control" name="field_group"
                                                           value="{{info.field_group}}">
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 用于表单显示的分组，以及设置该模型表单排序的显示</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">表单整理</label>

                                        <div class="col-sm-10">
                                            <input type="hidden" id="nestable-output" name="field_sort">
                                            <div class="row">
                                                {% set field_sort = info.field_sort|strToJson %}
                                                {% for ingredient, amount in info.field_group|parse_config_attr %}

                                                <div class="col-sm-3">
                                                    <div class="panel panel-default">
                                                        <header class="panel-heading">
                                                            <ul class="nav nav-pills pull-right">
                                                                <li>
                                                                    <a class="panel-toggle text-muted" href="#"><i
                                                                            class="fa fa-caret-down text-active"></i><i
                                                                            class="fa fa-caret-up text"></i></a>
                                                                </li>
                                                            </ul>
                                                            {{amount}}
                                                        </header>
                                                        <div class="panel-body clearfix">
                                                            <div id="nestable{{ingredient}}" class="dd nestable"
                                                                 data-group="{{ingredient}}">
                                                                <ol class="dd-list">

                                                                    {% for value in allfields %}
                                                                    {% if value.group == ingredient and value.is_show ==
                                                                    1 %}
                                                                    <li data-id="{{value.id}}" class="dd-item">
                                                                        <div class="dd-handle"> {{ value.title}} <span
                                                                                class="label bg-light">{{value.name}}</span>
                                                                        </div>
                                                                    </li>
                                                                    {% endif %}
                                                                    {% endfor %}
                                                                    {% if field_sort[ingredient]|isempty %}
                                                                    <li class="dd-item empty">
                                                                        <div class="dd-handle bg-light dk">拖拽到此</div>
                                                                    </li>
                                                                    {% endif %}
                                                                </ol>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                {% endfor %}

                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 直接拖动进行排序</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">字段别名定义</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                <div class="col-md-4 ">
                                                    <textarea name="attribute_alias" class="form-control">{{info.attribute_alias}}</textarea>
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 用于表单显示的名称</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">列表定义</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                <div class="col-md-4 ">
                                                    <textarea name="list_grid" class="form-control">{{info.list_grid}}</textarea>
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 默认列表模板的展示规则</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">默认搜索字段</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                <div class="col-md-4 ">
                                                    <input type="text" class="form-control" name="search_key"
                                                           value="{{info.search_key}}">
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 默认列表模板的默认搜索项</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">高级搜索字段</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                <div class="col-md-4 ">
                                                    <input type="text" class="form-control" name="search_list"
                                                           value="{{info.search_list}}">
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 默认列表模板的高级搜索项</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div id="tab-3" class="tab-pane fade">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">列表模板</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                <div class="col-md-4 ">
                                                    <input type="text" class="form-control" name="template_list"
                                                           value="{{info.template_list}}">
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 自定义的列表模板，放在src\view\cmswing下，不写则使用默认模板</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">新增模板</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                <div class="col-md-4 ">
                                                    <input type="text" class="form-control" name="template_add"
                                                           value="{{info.template_add}}">
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 自定义的新增模板，放在src\view\cmswing下，不写则使用默认模板</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">编辑模板</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                <div class="col-md-4 ">
                                                    <input type="text" class="form-control" name="template_edit"
                                                           value="{{info.template_edit}}">
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 自定义的编辑模板，放在src\view\cmswing下，不写则使用默认模板</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">列表数据大小</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                <div class="col-md-4 ">
                                                    <input type="text" class="form-control" name="list_row"
                                                           value="{{info.list_row}}">
                                                </div>
                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 默认列表模板的分页属性</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">绑定内容编辑器</label>

                                        <div class="col-sm-10">
                                            <div class="row">
                                                    {%set ev = info.editor|strToArray('_')%}
                                                    <input type="hidden" name="editor" value="{{info.editor}}">

                                                        <div class="col-md-3">

                                                    <select id="editor" name="" class="form-control m-b">
                                                        <option value="0" {{'selected' if ev[0]=='0'}}>默认</option>
                                                        <option value="1" {{'selected' if ev[0]=='1'}}>普通文本</option>
                                                        <option value="2" {{'selected' if ev[0]=='2'}}>富文本</option>
                                                        <option value="3" {{'selected' if ev[0]=='3'}}>Markdown</option>
                                                    </select>
                                                        </div>
                                                        <div class="col-md-4">
                                                    <select id="wysiwyg" name="" class="form-control m-b" style="display: {{'display' if ev[1] else 'none'}}">
                                                        <option value="2_1" {{'selected' if info.editor=='2_1'}}>Ueditor(百度编辑器)</option>
                                                        <option value="2_2" {{'selected' if info.editor=='2_2'}}>wangEditor</option>
                                                    </select>
                                                        </div>


                                                <div class="col-md-12">
                                                    <span class="help-block m-b-none text-muted">
                                                        <i class="fa fa-info-circle text-info"></i>
                                                        如果选择默认，会遵循编辑器插件的配置，一旦绑定不要轻易修改，否则会影响已有内容的前台渲染。</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="line line-dashed b-b line-lg pull-in"></div>
                            <div class="form-group form-submit">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <input type="hidden" name="id" value="{{info.id}}">
                                    <button class="btn btn-primary btn-s-md ajax-post " type="submit"
                                            target-form="form-horizontal">确定
                                    </button>
                                    <button class="btn btn-default" onclick="javascript:history.back(-1);return false;"
                                            type="submit">返回
                                    </button>

                                </div>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
        </div>

    </section>
</section>

{% endblock%}

{% block script%}
<script src="/static/admin/js/parsley/parsley.min.js"></script>
<script src="/static/admin/js/parsley/parsley.extend.js"></script>
<script src="/static/admin/js/chosen/chosen.jquery.min.js"></script>
<script src="/static/admin/js/nestable/jquery.nestable.js"></script>
<script>
    $(document).ready(function () {

        //选择编辑器
        var editorinput = $('input[name = "editor"]'), editor = $("#editor"), wysiwyg= $("#wysiwyg");
        editor.change(function(){
            var v = $(this).val()
            if(v == 2){
                wysiwyg.show();
                v=wysiwyg.val();
            }else {
                wysiwyg.hide();
            }
            editorinput.val(v)
        });
        wysiwyg.change(function(){
            var v = $(this).val();
            editorinput.val(v)
        });
        var obj = {}
        var updateOutput = function (e) {
            var list = e.length ? e : $(e.target),
                    output = list.data('output');

            // console.log(list.nestable('serialize'));
            if (list.find("li").length > 1) {
                list.find(".empty").remove();
            }
            var arr = [];
            $.each(list.nestable('serialize'), function (k, v) {
                if (v.id) {
                    arr.push(v.id)
                }

            })

            var goruid = list.attr('data-group')
            if (arr.length > 0) {
                obj[goruid] = arr.join(",").split(",")
            } else {
                obj[goruid] = arr
            }

            if (window.JSON) {
                output.val(window.JSON.stringify(obj)); //, null, 2));
            } else {
                output.val('JSON browser support required for this demo.');
            }
        };

        $.each($(".dd"), function (key, val) {
            $(val).nestable({maxDepth: 1}).on('change', updateOutput);
            updateOutput($(val).data('output', $('#nestable-output')));
        })
        // activate Nestable for list 2
//        $('#nestable2').nestable({
//            group: 1
//        });

        $(".chosen-select").chosen({
            placeholder_text: "选择字段"
        }).change(function (e) {
            var ids = $('[name = "attribute_list" ]').val()
            var arr = $("#nestable-output").val()

            arr = JSON.parse(arr);
            var narr = []
            $.each(arr, function (k, v) {
                $.each(v, function (n, m) {
                    narr.push(m)
                })
            })
            if (ids) {
                if (ids.length > narr.length) {
                    $.each(ids, function (k, v) {
                        if ($.inArray(v, narr) == -1) {
                            var text = $("[name='attribute_list']").find('option[value=' + v + ']').text();
                            var textarr = text.split(":")
                            //console.log(textarr);
                            var htm = '<li class="dd-item" data-id="' + v + '"><div class="dd-handle"> ' + textarr[0] + ' <span class="label bg-light">' + textarr[1] + '</span></div></li>'
                            if ($(".nestable").eq(0).find(".dd-list").length) {
                                $(".nestable").eq(0).find(".dd-list").append(htm)
                            } else {
                                $(".nestable").eq(0).empty();
                                $(".nestable").eq(0).html('<ol class="dd-list">' + htm + '</ol>')
                            }

                            $.each($(".dd"), function (key, val) {
                                updateOutput($(val).data('output', $('#nestable-output')));
                            })
                            // $("p").append("<b>Hello</b>");
                        }

                    })
                } else if (ids.length < narr.length) {
                    $.each(narr, function (k, v) {
                        if ($.inArray(v, ids) == -1) {
                            var clas = '[data-id=' + v + ']'

                            $.each($(".dd"), function (key, val) {
                                $(val).find(".dd-list > li" + clas).remove();
                                if ($(val).find(".dd-list > li").length == 0) {
                                    $(val).html('<div class="dd-empty"></div>');
                                }
                                updateOutput($(val).data('output', $('#nestable-output')));
                            })
                            // $("p").append("<b>Hello</b>");
                        }

                    })
                }
            } else {
                $.each($(".dd"), function (key, val) {
                    $(val).html('<div class="dd-empty"></div>');
                    updateOutput($(val).data('output', $('#nestable-output')));
                })
            }

           // console.log(ids)
           // console.log(narr)
        });

    });

</script>
{% endblock%}